<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,
            minimum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="./assest/style/reset.css" />
    <link rel="stylesheet" href="./assest/style/font/iconfont.css" />
    <link rel="stylesheet" href="./assest/style/common.css" />
    <link rel="stylesheet" href="./assest/style/house.css" />
    <title>首页</title>
  </head>

  <body>
    <div class="house-index" id="app">
      <header class="flex jc-c aic pl-15 pr-15 bg-fff fixed">
        <img
          src="./assest//img/logo.png"
          alt=""
        />
        <p class="search-box rel ml-30">
          <input
            type="text"
            class="search f14"
            placeholder="搜索关键字/城市/别墅名"
          /><i class="icon iconfont icon-search abs"></i>
        </p>
      </header>
      <div class="swiper">
        <img
          class="w100pc"
          src="https://img.villaday.com//images/house_201/28873/28873-10-161581.png"
          alt=""
        />
      </div>
      <div class="tuijian bg-fff ovh pb-15">
        <h3 class="mt-15" style="padding-left: 8px">热门推荐</h3>
        <ul class="flex fw">
          <li v-for="item in sceneList" class="mt-15 flex2 aic item">
            <img
              :src="`assest/img/${item.icon}`"
              alt=""
            /><span class="f12 mt-5">海边别墅</span>
          </li> 
        </ul>
      </div>
      <div class="hotCity mt-10 bg-fff ovh">
        <h3 class="flex aic pl-8">热门城市</h3>
        <ul class="list flex fw">
          <li class="item fcc">深圳</li>
          <li class="item fcc">惠州</li>
          <li class="item fcc">广州</li>
          <li class="item fcc">清远</li>
          <li class="item fcc">河源</li>
          <li class="item fcc">江门</li>
          <li class="item fcc">厦门</li>
          <li class="item fcc">三亚</li>
        </ul>
      </div>
      <div class="target mt-10 bg-fff">
        <h3 class="h40 flex aic pl-8">目的地推荐</h3>
        <ul id="house-list" class="list">
          <a v-for="item in houseList" class="item" :href="`./house-dail.html?id=${item.id}`">
            <div class="img-box rel">
              <img
                class="w100pc"
                :src="`./assest/img/${item.imageUrl}`"
                alt=""
              /><span class="h40 fcc price fff abs">¥3288</span>
            </div>
            <div class="desc f14 pb-10">
              <h3 class="mt-10 f12">大鹏古城·​千语居7房客栈</h3>
              <p class="mt-10 f10 lh15">
                浪漫美景+免费WIFI、电视、齐全设备=完美假期。
              </p>
              <p class="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
        </ul>
      </div>
    </div>

    <!-- 底部导航 -->
    <!-- <div class="footer nav-box fixed flex jc-sa bg-fff">
      <a class="box flex aic fdc" href="./house.html">
        <img src="./assest/img/home.png" alt="" />
        <div class="text mt-5 f999">首页</div>
      </a>

      <a class="box flex aic fdc" href="./target-fangyuan.html">
        <img src="./assest/img/xingqiu.png" alt="" />
        <div class="text mt-5 f999">目的地</div>
      </a>

      <a class="box flex aic fdc" href="./demand.html">
        <img src="./assest/img/tijiao.png" alt="" />
        <div class="text mt-5 f999">提交需求</div>
      </a>

      <a class="box flex aic fdc" href="./discover.html">
        <img class="mt-5" src="./assest/img/xingqiu.png" alt="" />
        <div class="text mt-5 f999">发现</div>
      </a>

      <a class="box flex aic fdc" href="./my.html">
        <i class="icon-wode iconfont"></i>
        <div class="text mt-5 f999">我的</div>
      </a>
    </div> -->
    <script src="./js/axios.js"></script>
    <script src="./js/jQuery.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/home.js"></script>
  </body>
</html>
